<template>
 
 <div>
	 
	<div id="economicAnalysisMain" class="our-service-sass hide-pr show-pr">
		<div style="margin-top: 7%; " class="container">
			<div class="inner-wrapper">
				<div style="display: inline-flex;width: 100%;" class="row">
					<div style="cursor: pointer;" @click="jumpToPage('hpEconomicAnalysis')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up">
						<div class="service-block">
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<div class="hover-content"></div>
							<i class="flaticon-web user"></i>
							<h5 class="title"><a href="#">制(储)氢经济性分析</a></h5>
							<p>Economic analysis of hydrogen production</p>
							<a class="detail-button"><i class="icon-img"><img src="../../assets/images/6172532.gif" width="100%"></i></a>
						</div> <!-- /.service-block -->
					</div> <!-- /.single-block -->
					<div style="cursor: pointer;" @click="jumpToPage('htEconomicAnalysis')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up" data-aos-delay="300">
						<div class="service-block">
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<div class="hover-content"></div>
							<i class="flaticon-value icon-s"></i>
							<h5 class="title"><a href="#">输氢经济性分析</a></h5>
							<p>Economic analysis of hydrogen transportation</p>
							<a href="#" class="detail-button"><i class="icon-img"><img src="../../assets/images/6172518.gif"  width="100%"></i></a>
						</div> <!-- /.service-block -->
					</div> <!-- /.single-block -->
					<div style="cursor: pointer;" @click="jumpToPage('huEconomicAnalysis')" class="col-lg-4 single-block aos-init aos-animate" data-aos="fade-up" data-aos-delay="500">
						<div class="service-block">
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<span class="snow-dot"></span>
							<div class="hover-content"></div>
							<i class="flaticon-login icon-s"></i>
							<h5 class="title"><a href="#">用氢经济性分析</a></h5>
							<p>Economic analysis of hydrogen use</p>
							<a href="#" class="detail-button"><i class="icon-img">
			<img src="../../assets/images/6172512.gif" width="100%">
			</i></a>
						</div> <!-- /.service-block -->
					</div> <!-- /.single-block -->
				</div> <!-- /.row -->
			</div> <!-- /.inner-wrapper -->
		</div> <!-- /.container -->


			
		
	
	</div>
	 
	<div style="margin-left: 1vh;margin-right: 1vh;top: 9.9%; width: 99%;height: auto;float: left;position: absolute;">
		<router-view :key="activeDate"></router-view>
	</div>

</div>

</template> 

<script>
    
    import '../../assets/js/script.js';
    import '../../assets/css/economicAnalysisMainStyle.css';
    import '../../assets/css/bootstrap.min.css';

   export default {
    name: 'economicAnalysisMain',
    data(){
      return{
        activeDate:'',
      }
    },
    mounted : function(){
      this.activeDate = new Date().getTime();
    },
    methods:{
      
      jumpToPage : function(pageName){
         
        
        this.activeDate = new Date().getTime();

		var type = "";
		if(pageName=="hpEconomicAnalysis"){
			type = "1";	
		}else if(pageName=="htEconomicAnalysis"){
			type = "2";
		}else if(pageName=="huEconomicAnalysis"){
			type = "3";
		}

        //路由跳转  
        this.$router.replace({path:'/projectMaintenance',query:{"type":type}})


      }

    }
  }
</script>
<style scoped>
@media (min-width: 1200px) {
    .container {
        /* max-width: 1140px; */
        /* width: 20vh; */
    }
}

@media (min-width: 1200px) {
    .container {
        /* max-width: 1140px; */
    }
}

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

@media (min-width: 768px) {
    .container {
        /* max-width: 720px; */
    }
}

@media (min-width: 576px) {
    .container {
        /* max-width: 540px; */
    }
}

</style>
